<template>
  <el-card>
    <div class="header">
      <div class="wrapSpace">
        <span>树ip：</span>
        <el-select
          v-model="selectValue"
          placeholder="树ip"
          filterable
          multiple
          collapse-tags
          style="margin-right: 20px;"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button
          v-if="activeName == 'first'"
          type="primary"
          icon="el-icon-search"
          style="marginRight:50px"
          @click="handelSearch"
        >查询</el-button>
        <template v-if="activeName == 'first'">
          <el-checkbox v-model="syncCheck" style="marginRight: 5px" @change="checkboxChange" />
          <el-select
            v-model="timerValue"
            placeholder="树id"
            filterable
            collapse-tags
            style="width: 80px;"
            @change="selectChange"
          >
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span>秒同步一次</span>
        </template>
        <template v-if="activeName == 'first'">
          <el-checkbox
            :disabled="!selectValue.length"
            v-model="syncCheck1"
            style="margin:0 5px 0 50px"
            @change="checkboxChange1"
          />日志
          <el-select
            v-model="timerValue1"
            :disabled="!selectValue.length"
            placeholder="树id"
            filterable
            collapse-tags
            style="width: 80px;"
            @change="selectChange"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span>秒同步一次</span>
        </template>
      </div>
    </div>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="树投屏" name="first">
        <div> 
          <el-button type="primary" @click="handleRegistere">种树</el-button>
          <el-button type="primary" @click="handlehaoyang">培育</el-button>
          <el-button style="marginRight:50px" type="primary" @click="hangdleArte">施肥</el-button>
          <el-collapse accordion v-model="activeNames" @change="handleChange">
            <el-collapse-item
              v-for="(ele, ind) in imgList"
              :key="ind"
              :title="ele.ip"
              :name="ele.ip"
              >
              <el-row>
                <!-- 图片 -->
                <el-col v-for="(item, index) in list" :key="index" :span="3">
                  <div class="wrap">
                    <div>
                      <div>
                        <el-checkbox style="padding: 0px 5px;" @change="() => chooseDevice(item)" />
                        <span>树名称：{{ item.deviceName }}</span>
                      </div>
                      <img style="width: 140px; height: 280px" :src="item.img" />
                      <!-- @click="() => showImagePreview(item.img)" -->
                    </div>
                  </div>
                </el-col>
                <!-- 日志 -->
                <el-col v-for="(item, index) in log" :key="index" :span="3">
                  <div class="log">
                      <ul>
                        <li v-for="(v,i) in item" :key="i">
                          <div class="odiv1">{{ i + 1 }}</div>
                          <p
                            class="message"
                            :style="{ color:
                            v.level === 'error'? 'red' : '#fff'}"
                          >{{ v.message }}</p>
                        </li>
                        <li v-if="log.length">
                          <span v-if="syncCheck1" class="log_loading">
                            正在更新日志...
                            <i class="el-icon-loading"></i>
                          </span>
                          <span v-else class="log_loading">停止更新日志</span>
                        </li>
                        <li v-if="!log.length" class="noData">暂无日志数据</li>
                      </ul>
                    </div>
                </el-col>
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-tab-pane>
      <el-tab-pane label="种树日志" name="second">
        <Table1
          v-if="activeName === 'second'"
          :select-value="selectValue"
          :sync-check="syncCheck"
          :timer-value="timerValue"
        />
      </el-tab-pane>
      <el-tab-pane label="培育日志" name="third">
        <Table2
          v-if="activeName === 'third'"
          :select-value="selectValue"
          :sync-check="syncCheck"
          :timer-value="timerValue"
        />
      </el-tab-pane>
      <el-tab-pane label="施肥日志" name="fourth">
        <Table3
          v-if="activeName === 'fourth'"
          :select-value="selectValue"
          :sync-check="syncCheck"
          :timer-value="timerValue"
        />
      </el-tab-pane>
    </el-tabs>
    <!-- 种树 -->
    <Register ref="registerRef" :select-value="selectValue" :chooseItem="chooseItem" />
    <AttentionForm ref="AttentionForm" :select-value="selectValue" :chooseItem="chooseItem" />
  </el-card>
</template>

<script>
import {
  getDeviceList,
  searchList,
  getImageList
} from "../../request/groupcontrol";
import Register from "./component/resister";
import AttentionForm from "./component/attentionForm";
import Table1 from "./component/table1.vue";
import Table2 from "./component/table2.vue";
import Table3 from "./component/table3.vue";
export default {
  components: {
    Register,
    AttentionForm,
    Table1,
    Table2,
    Table3
  },
  data() {
    return {
      list: [],
      options: [],
      timerValue: 3,
      timerValue1: 3,
      currentip: '',
      options1: [
        {
          label: "1秒",
          value: 1
        },
        {
          label: "3秒",
          value: 3
        },
        {
          label: "5秒",
          value: 5
        },
        {
          label: "7秒",
          value: 7
        },
        {
          label: "9秒",
          value: 9
        }
      ],
      options2: [
        {
          label: "2秒",
          value: 2
        },
        {
          label: "3秒",
          value: 3
        },
        {
          label: "4秒",
          value: 4
        },
        {
          label: "5秒",
          value: 5
        },
        {
          label: "6秒",
          value: 6
        }
      ],
      log: [],
      selectValue: [],
      syncCheck: false,
      syncCheck1: false,
      imgList: [],
      timer: null,
      timer1: null,
      activeNames: [],
      activeCollpase: [],
      current: 1,
      activeName: "first",
      chooseItem: [],
      imageUrl: ""
    };
  },
  watch: {
    syncCheck1: {
      handler: function(newV) {
        console.log("newV", newV);
        if (newV && this.imgList.length) {
          this.timer1 = setInterval(() => {
            this.getList(this.currentip);
            newV && this.scrollTop();
          }, this.timerValue1 * 1000);
        } else {
          clearInterval(this.timer1);
        }
      },
      immediate: true
    }
  },
  created() {
    // 初始化图片列表
    this.getDeviceList();
    this.searchList();
  },
  beforeDestroy() {
    clearInterval(this.timer);
    clearInterval(this.timer1);
  },
  methods: {
    getList(ip) {
      this.$http
        .post(`/api/cloud_log/window/get `, {
          limit: 10000,
          ip,
          windowIndex: [1,2,3,4,5,6,7,8]
        })
        .then(res => {
          if (res.success) {
            this.log = res.data
            if (this.log.length) {
              setTimeout(() => {
                console.log('this', this);
                this.scrollTop()
              }, 5000);
            }
          } else {
            this.$error(res.msg);
          }
        });
    },
    // form种树
    handleRegistere() {
      this.$refs.registerRef.handelOpen();
    },
    // 养好
    handlehaoyang() {
      console.log("this.chooseItem", this.chooseItem);
      this.$confirm("确定培育吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http
          .post(`/api/cloud_curbs/batch_raise`, {
            ips: this.selectValue,
            containerIps: this.chooseItem.map(ele => {
              return ele.containerIp;
            })
          })
          .then(res => {
            if (res.success) {
              this.$success("operate success");
            }
          });
      });
    },
    // 施肥
    hangdleArte() {
      this.$refs.AttentionForm.open();
    }, 
    // 施肥日志
    flowLog() {},
    checkboxChange(val) {
      this.syncCheck = val;
      if (val) {
        clearInterval(this.timer);
        const tabList = {
          first: this.searchList,
          second: this.registerLog,
          thrid: this.feedNumberLog,
          fourth: this.flowLog
        };
        this.timer = setInterval(() => {
          // this.searchList()
          tabList[this.activeName]();
        }, this.timerValue * 1000);
      } else {
        clearInterval(this.timer);
      }
    },
    checkboxChange1(val) {
      this.syncCheck1 = val;
    },
    selectChange(e) {
      this.timerValue = e;
      if (this.syncCheck) {
        this.checkboxChange(true);
      }
    },
    scrollTop() {
      const dom = document.getElementsByClassName("log");
      console.log('domdom', dom);
      dom.length &&
        dom.forEach(v => {
          v.scrollTo(0, v.scrollHeight);
        });
    },
    handelSearch() {
      // selectValue 根据筛选查询
      this.searchList();
    },
    handleChange(val) {
      console.log(val);
      this.syncCheck1 = false
      this.log = []
      this.currentip = val
      this.getList(val)
      this.current = val[1];
      this.getImageList();
    },
    async getDeviceList() {
      const res = await getDeviceList();
      this.options = res.map(ele => {
        return {
          value: ele.ip,
          label: ele.ip
        };
      });
    },
    async searchList() {
      const res = await searchList({
        ips: this.selectValue
      });
      this.imgList = res || [];
      this.getImageList();
    },
    async getImageList() {
      if (!this.imgList.length) {
        return
      }
      const res = await getImageList({
        ip: this.currentip || ""
      });
      if (res) {
        this.list = res;
      }
    },
    chooseDevice(item) {
      this.chooseItem.push(item);
      console.log("this.chooseItem", this.chooseItem);
    },
    // 预览
    // showImagePreview(src) {
    //   const image = new Image()
    //   image.src = src
    //   image.onload = () => {
    //     // 创建弹出层
    //     const previewContainer = document.createElement('div')
    //     previewContainer.style.position = 'fixed'
    //     previewContainer.style.top = 0
    //     previewContainer.style.bottom = 0
    //     previewContainer.style.left = 0
    //     previewContainer.style.right = 0
    //     previewContainer.style.backgroundColor = 'rgba(0,0,0,0.8)'
    //     previewContainer.style.display = 'flex'
    //     previewContainer.style.justifyContent = 'center'
    //     previewContainer.style.alignItems = 'center'
    //     previewContainer.style.zIndex = 99
    //     document.body.appendChild(previewContainer)
    //     // 在弹出层中添加图片
    //     const previewImage = document.createElement('img')
    //     previewImage.src = src
    //     previewImage.style.maxWidth = '80%'
    //     previewImage.style.maxHeight = '80%'
    //     previewContainer.appendChild(previewImage)
    //     // 点击弹出层，关闭预览
    //     previewContainer.addEventListener('click', () => {
    //       document.body.removeChild(previewContainer)
    //     })
    //   }
    // },
    handleClick(tab, event) {}
  },
};
</script>

<style lang="less" scoped>
/deep/.el-card {
  height: 100% !important;
}

.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.wrapSpace {
  display: flex;
  align-items: center;
}

.el-row {
  // margin-bottom: 20px;
  // max-height: 500px;
  overflow-y: auto;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-collapse .el-col {
  border-radius: 4px;
  height: 400px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  // border: 1px solid #d3dce6;
  // height: 350px;
  // margin-bottom: 15px;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  // &:hover {
  //   background: #ccc;
  //   transform: scale(1.1);
  //   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  //   transition: all .2s;
  // }
}
.wrap {
  border: 1px solid #333;
  width: 140px;
  height: 280px;
  .log {
    background-color: black;
    height: 200px;
    overflow-y: scroll;
    ul {
      width: 100%;
      padding: 0;
      list-style: none;
      li {
        padding: 0;
        margin: 0;
        display: flex;
        list-style: none;
        justify-content: flex-start;
        align-items: center;
        padding: 0 0 0 5px;
        .message {
          // width: 110px;
          display: inline-block;
          word-wrap: break-word;
          background-attachment: green;
        }
        .odiv1 {
          width: 30px;
          color: #fff;
          font-size: 16px;
          padding: 3px;
        }
        .log_loading {
          padding-left: 10px;
          color: yellow;
          padding-bottom: 10px;
        }
      }
      .noData {
        display: flex;
        justify-content: center;
        height: 90%;
      }
    }
  }
}
.row-bg {
  // padding: 10px 0;
  background-color: #f9fafc;
}
</style>
